{include file='public/header' /}
    <style>
        .layui-form-label{width: 140px}
        .layui-input-inline{}
        .header span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
        .header div{border-bottom: solid 2px #009688;margin: 8px 0 6px 0;}
        .header button{float: right;margin-top: -5px;}
    </style>
</head>
<body style="padding: 10px;">
<div class="header">
    <span>添加房间</span>
    <div></div>
</div>
<form class="layui-form" lay-filter="form">


    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color: #FF5722">*</span>公寓详细地址</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="con_house_gyxxdz" lay-verify="">
            <input type="hidden" class="layui-input" name="house_id" value="{$house['tch_id']}">
        </div>
        <div class="layui-input-inline">
            <button id="add" class="layui-btn" lay-submit lay-filter="add">添加房间</button>
        </div>
        <div class="layui-input-inline">
            <button id="save" class="layui-btn" lay-submit lay-filter="save">保存</button>
        </div>
    </div>
    <div style="padding: 12px; background-color: #F2F2F2; margin-bottom: 12px">
        <div class="layui-row layui-col-space15">
            {volist name="room" id="vo"}
            <div class="layui-col-md6" name="{$vo.room_num}">
                <div class="layui-card">
                    <div class="layui-card-header">{$vo.room_num}号房间</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color: #FF5722">*</span>门锁绑定</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="door_lock[{$vo.room_num}]" value="{$vo.door_lock}" lay-verify="">
                                <input type="hidden" class="layui-input" name="room_num[{$vo.room_num}]" value="{$vo.room_num}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color: #FF5722">*</span>电表余额</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="elec_meter[{$vo.room_num}]" value="{$vo.elec_meter}" lay-verify="">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color: #FF5722">*</span>删除房间</label>
                            <div class="layui-input-block">
                                <button id="{$vo.room_num}" class="layui-btn layui-btn-danger  layui-btn-sm" lay-submit lay-filter="del">删除</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            {/volist}

        </div>
    </div>

</form>

<script type="text/javascript">
    layui.use(['layer','form','upload'],function(){
        form = layui.form;
        layer = layui.layer;
        $ = layui.jquery;
        form.on('submit(del)', function(data){
            //var name = $.trim($('input[name="provid"]').val());

            console.log(data.field);
            console.log(data);
            console.log(data.elem.id);
            layer.msg('正在删除房间请稍候。。。', {icon: 16,time: 100000,shade : [0.5 , '#000' , true]});
            //.serialize()是将表单中的值序列化id=0&username=2&gid=1&pwd=2&truename=2
            $.post('__PUBLIC__/admin/apartment/room_del',$('form').serialize()+'&id='+data.elem.id,function(res){
                //console.log(res);
                if(res.code>0){
                    layer.alert(res.msg,{icon:2});
                }else{
                    $("div[name="+data.elem.id+"]").remove();
                    layer.msg(res.msg,{icon:1});
                }
            },'json');return false;
        });

        form.on('submit(add)', function(data) {

            //console.log(data.elem.id); //得到checkbox原始DOM对象
            //console.log(data.elem.checked); //开关是否开启，true或者false
            //console.log(data.value); //开关value值，也可以通过data.elem.value得到
            //console.log(data.field); //得到美化后的DOM对象
            layer.msg('房间创建中。。。', {icon: 16,time: 100000,shade : [0.5 , '#000' , true]});
            for (var i = 7; i >= 0; i--) {
                if ($("input[name='room_num[6]']").val() == i) {
                    layer.alert("最多创建6个房间", {icon: 2});
                    return false;
                }
                if ($("input[name='room_num[" + i + "]']").val() == i) {
                    var num = i + 1;
                    //console.log($("input[name='room_num[" + i + "]']").val());
                    $.post('__PUBLIC__/admin/apartment/room_add','&room_num='+num+'&house_id='+data.field.house_id,function(res){
                        //console.log(res);
                        if(res.code>0){
                            layer.alert(res.msg,{icon:2});
                        }else{
                            layer.msg(res.msg,{icon:1});
                            $(".layui-col-space15").append("<div class=\"layui-col-md6\" name=\"" + num + "\">\n" +
                                "                <div class=\"layui-card\">\n" +
                                "                    <div class=\"layui-card-header\">" + num + "号房间</div>\n" +
                                "                    <div class=\"layui-card-body\">\n" +
                                "                        <div class=\"layui-form-item\">\n" +
                                "                            <label class=\"layui-form-label\"><span style=\"color: #FF5722\">*</span>门锁绑定</label>\n" +
                                "                            <div class=\"layui-input-inline\">\n" +
                                "                                <input type=\"text\" class=\"layui-input\" name=\"door_lock[" + num + "]\" lay-verify=\"\">\n" +
                                "                                <input type=\"hidden\" class=\"layui-input\" name=\"room_num[" + num + "]\" value=\"" + num + "\">\n" +
                                "                            </div>\n" +
                                "                        </div>\n" +
                                "                        <div class=\"layui-form-item\">\n" +
                                "                            <label class=\"layui-form-label\"><span style=\"color: #FF5722\">*</span>电表余额</label>\n" +
                                "                            <div class=\"layui-input-inline\">\n" +
                                "                                <input type=\"text\" class=\"layui-input\" name=\"elec_meter[" + num + "]\" lay-verify=\"\">\n" +
                                "                            </div>\n" +
                                "                        </div>\n" +
                                "                        <div class=\"layui-form-item\">\n" +
                                "                            <label class=\"layui-form-label\"><span style=\"color: #FF5722\">*</span>删除房间</label>\n" +
                                "                            <div class=\"layui-input-block\">\n" +
                                "                                <button id=\"" + num + "\" class=\"layui-btn layui-btn-danger  layui-btn-sm\" lay-submit lay-filter=\"del\">删除</button>\n" +
                                "                            </div>\n" +
                                "                        </div>\n" +
                                "                    </div>\n" +
                                "\n" +
                                "                </div>\n" +
                                "            </div>");
                            return false;
                        }
                    },'json');return false;

                }
            }
        });

        form.on('submit(save)', function(data){
            //var name = $.trim($('input[name="provid"]').val());
            // console.log(data.field);
            // console.log(data.elem.id);
            console.log(data);
            layer.msg('正在保存请稍候。。。', {icon: 16,time: 100000,shade : [0.5 , '#000' , true]});
            //.serialize()是将表单中的值序列化id=0&username=2&gid=1&pwd=2&truename=2
            $.post('__PUBLIC__/admin/apartment/room_save',$('form').serialize()+'&id='+data.elem.id,function(res){
                //console.log(res);
                if(res.code>0){
                    layer.alert(res.msg,{icon:2});
                }else{
                    layer.msg(res.msg,{icon:1});
                }
            },'json');return false;
        });

        form.val("form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值'con_house_nature' => string '1' (length=1)
            'con_house_cqzslb':'{$house['con_house_cqzslb']}'
            ,'con_house_nature': '{$house['con_house_nature']}'
            ,'con_house_zsbh': '{$house['con_house_zsbh']}'
            ,'con_house_cqdz': '{$house['con_house_cqdz']}'
            ,'con_house_jzmj': '{$house['con_house_jzmj']}'
            ,'con_house_jssl_s': '{$house['con_house_jssl_s']}'
            ,'con_house_jssl_t': '{$house['con_house_jssl_t']}'
            ,'con_house_jssl_c': '{$house['con_house_jssl_c']}'
            ,'con_house_jssl_w': '{$house['con_house_jssl_w']}'
            ,'con_house_zhrssx': '{$house['con_house_zhrssx']}'
            ,'con_house_sfsddy': '{$house['con_house_sfsddy']}'
            ,'con_house_gnfs': '{$house['con_house_gnfs']}'
            ,'con_house_gyxxdz': '{$house['con_house_gyxxdz']}'
            // ,'provid' :  '420000'
            // ,'cityid' :  '420100'
            // ,'areaid' :  '420115'
        });

        form.verify({
            con_house_nature: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格']

        });
    });


    // window.setInterval("ssave()",10000);//每隔1秒，调用一次getDateDemo()
    // function ssave(){
    //     console.log(navigator);
    // }
</script>
</body>
</html>